<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="icon" href="../static/shop.ico" type="image/x-icon">

    <style>
        @import url("https://fonts.googleapis.com/css?family=Lato:400,700");

        /* center container in the middle */
        html {
            display: grid;
            min-height: 100%;
        }

        body {
            display: grid;
            background: rgb(238, 238, 238);
            font-family: "Lato", sans-serif, sans-serif;
            text-transform: uppercase;
        }

        .container {
            position: relative;
            margin: auto;
            overflow: hidden;
            width: 1000px;
            height: 600px;
            background: rgb(255, 255, 255);
            box-shadow: 5px 5px 15px rgba(186, 186, 186, 0.5);
            border-radius: 10px;
        }

        p {
            font-size: 1.2em;
            color: rgba(186, 186, 186, 0.8);
            letter-spacing: 1px;
            margin: 10px 0;
        }

        h1 {
            font-size: 2.4em;
            color: #4E4E4E;
            margin-top: -5px;
        }

        h2 {
            color: #C3A1A0;
            margin-top: -5px;
            margin-bottom: 10px;
        }

        img {
            width: 480px;
            height: 480px;
            margin: 10px 25px;
        }

        .product {
            position: absolute;
            width: 40%;
            height: calc(100% - 80px);
            top: 10%;
            left: 60%;

            overflow: auto;
        }

        .desc {
            text-transform: none;
            letter-spacing: 0;
            margin-top: 17px;
            /*margin-bottom: 0;*/
            color: #4E4E4E;
            font-size: 1em;
            line-height: 1.6em;
            text-indent: 2em;
            margin-right: 25px;
            text-align: justify;

            /*height: 150px;*/
            /*overflow: auto;*/
        }

        button {
            background: #53b5aa;
            border: 1px solid #999;
            border-style: none none solid none;
            cursor: pointer;
            display: block;
            color: #fff;
            font-size: 20px;
            font-weight: 300;
            padding: 16px 0;
            width: 290px;
            text-align: center;

            -webkit-transition: all .2s linear;
            -moz-transition: all .2s linear;
            -ms-transition: all .2s linear;
            -o-transition: all .2s linear;
            transition: all .2s linear;

        }

        button:hover {
            color: #fff;
            background: #429188;
        }

        .add {
            width: 90%;
        }

        .qt,
        .qt-plus,
        .qt-minus {
            display: block;
            float: left;
        }

        .qt {
            font-size: 19px;
            line-height: 50px;
            width: 70px;
            text-align: center;
        }

        .qt-plus,
        .qt-minus {
            background: #fcfcfc;
            border: none;
            font-size: 30px;
            font-weight: 300;
            height: 100%;
            padding: 0 20px;
            -webkit-transition: background .2s linear;
            -moz-transition: background .2s linear;
            -ms-transition: background .2s linear;
            -o-transition: background .2s linear;
            transition: background .2s linear;
        }

        .qt-plus:hover,
        .qt-minus:hover {
            background: #53b5aa;
            color: #fff;
            cursor: pointer;
        }

        .qt-plus {
            line-height: 50px;
        }

        .qt-minus {
            line-height: 47px;
        }

        .num-choose {
            margin-bottom: 10px;
            height: auto;
            overflow: hidden;
        }
    </style>
</head>

<body>


    <div class="container">
        <button id="back-to-index" style="border-bottom-left-radius: 10px;margin-bottom: 10px;">
            &lt;&nbsp;&nbsp;返回商城
        </button>
        <div class="images">
            <img th:src="${image}"/>
        </div>

        <div class="product">
            <p th:text="'id:'+${pid}">id:123</p>
            <h1 th:text="${name}">商品名---99纯金尊贵奢华的商品 REDMI 红米 K40 PRO 5G智能手机 12GB 256GB</h1>
            <h2 th:text="'￥'+${price}">￥150</h2>


            <div class="num-choose">
                <div class="qt-minus">-</div>
                <div class="qt">1</div>
                <div class="qt-plus">+</div>
            </div>

            <div class="buttons">
                <button class="add btn-add">加入购物车</button>
            </div>

            <p class="desc" th:text="${description}">
                这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。这是一段长描述。
            </p>



        </div>
    </div>

    <script>

        $("#back-to-index").click(function () {
            location.href = "../index.html";
        });

        $(".qt-plus").click(function () {
            $(this).parent().children(".qt").html(parseInt($(this).parent().children(".qt").html()) + 1);
        });

        $(".qt-minus").click(function () {

            child = $(this).parent().children(".qt");
            if (parseInt(child.html()) > 1) {
                child.html(parseInt(child.html()) - 1);
            }
        });

        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return false;
        }

        $(".btn-add").click(function () {
            let pid=getQueryVariable("pid");
            let num=parseInt($(".qt").html());
            let str="pid="+pid+"&num="+num;
            $.ajax({
                url: "/cart/insert",
                type: "POST",
                data:"pid="+pid+"&num="+num,
                dataType: "json",
                success: function(json) {
                    if (json.state == 200) {
                        alert("添加到购物车成功")
                    } else {
                        alert("添加到购物车失败！" + json.message);
                        console.log("FALSE")
                    }
                }
            });
        });


    </script>
</body>

</html>